<!-- 求职者经验情况-招聘者 -->

<template>
  <div class="line" ref="line_chart">
  </div>
</template>
<script lang='ts'>
import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts';
// import {  EchartsOption, EChartsResponsiveOption } from "echarts"
import {getJobSeekerJobEx} from "@/api/enterpriseApi"
import { elmessage, data } from "@/hook/hook"

export default {
  name: 'JobSeekerExChart',
  setup() {
    const store = useStore()
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例

    const line_chart = ref()


    // 从后台获取数据
    const getDatas = () => {
      getJobSeekerJobEx(data()).then((res: any) => {
        
        // console.log(res.data["message"]);
        dataSetX(res.data["dataX"])
        dataSetY(res.data["dataY"])
        
      })
    }
    const dataSetX = (data: any) => {
      // store.state.enterpriseState.jobSeekerJobEx.X=data
      store.state.enterpriseState.jobSeekerJobEx.X=data
      
    }
    const dataSetY = (data: any) => {
      store.state.enterpriseState.jobSeekerJobEx.Y=data
    }
    const dataGetX = () => {
      return store.state.enterpriseState.jobSeekerJobEx.X
    }
    const dataGetY = () => {
      return store.state.enterpriseState.jobSeekerJobEx.Y
    }
    // 画图
    const init = () => {
      var myChart = echarts.init(line_chart.value) //这里是为了获得容器所在位置   

      // 指定地图配置项和数据-折线
      var option = {
        title: {
          text: '求职者工作经验分布',
          // subtext: '注：仅统计前十',
          left: 'left',
          textStyle:{
            fontSize: 24
          }
        },
        xAxis: {
          type: 'category',
          // data: ['1年以下', '1-2年', '2-3年', '3-5年', '5-8年', '8-10年', '10年以上']
          data: dataGetX()
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: dataGetY(),
            type: 'line',
            smooth: true
          }
        ]
      };




      myChart.setOption(option)


    }

    onMounted(async () => {
      await getDatas()
      setTimeout(() => {
        init()
      }, 500);

    })


    return {
      line_chart,
    }
  }
}
</script>
<style scoped>
.line {
  /* display: flex; */
  width: 600px;
  height: 500px;
}
</style>